<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>


    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>


</div>
</body>
<!-- import Vue before Element -->
<script src="/static/js/vue.js"></script>
<!-- import JavaScript -->
<script src="/static/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false ,
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ]
            }
        }
    })
</script>
</html>